<!doctype html>
<html lang="zh-CN">
<head>
  <!-- 必须的 meta 标签 -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap 的 CSS 文件 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
  <style>
    .content {
      width: 100%;
      height: auto;
      word-wrap:break-word;
      word-break:break-all;
      overflow: hidden;

    }
    .footer {
        height: 40px;
        line-height: 40px;
        position:fixed;
        bottom:0px;
        top:auto;
        width: 100%;
        text-align: center;
        background: #333;
        color: #fff;
        font-family: Arial;
        font-size: 12px;
        letter-spacing: 1px;
    }
  </style>
  <title>TodoWork!</title>
</head>
<body>
<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1 class="display-4">TodoWork = =</h1>
    <p class="lead">一个高效的学习系统!</p>
  </div>
</div>
<div id="state">

</div>
<div class="control_area" style="margin-left: 20px">





</div>
<div class="btn_group" style="margin-top: 20px;margin-left: 20px" >
<button type="button" class="btn submit btn-primary">登 录</button>
<button type="button" class="btn btn-success register">注 册</button>
<button type="button" class="btn btn-danger forget">忘 记</button>
</div>

<div class="card" style="width: 18rem;margin: 20px">

</div>
<div class="footer">
    TodoWork - 桂ICP备 2022000821号-1 Version 0.4
</div>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
<script>
    drawLogin()
  var flag = 0
  var code = 0;
    var changeEmail = "";
  //登陆验证
    $(".submit").on("click",function () {
        code=0;
        var str = "    <div class=\"d-flex justify-content-center\">\n" +
            "        <div class=\"spinner-border\" role=\"status\">\n" +
            "            <span class=\"sr-only\">Loading...</span>\n" +
            "        </div>\n" +
            "    </div>"
      if(!(flag === 0)){
          drawLogin()
        flag = 0;
        return true;
      }
      $("#state").append(str);
    var email = $(".control_area").children(".form-group").children("#email").val()
    var password = $(".control_area").children(".form-group").children("#password").val()
    if(email === "" || password === ""){
        sendMessage("警告","账号密码不能为空","warning")
        return false;
    }
      $.ajax({
        type:'post',
        url:'/Registor',
        data:{
          'email':email,
          'password':password
        },
        traditional:true,
        async:false,
        dataType:'json',
        success:function (data) {
            $.cookie('isLogin',false)
            $.cookie('user',data);
            $.cookie('account',email);
          window.location.href='mainpage.html'

          //要获得用户名存到Session里共享数据
        },
        error:function (data) {
            sendMessage("登陆失败","请检查邮箱和密码拼写","danger")
        }
      })

    })
    //绘制登录界面
  function drawLogin() {
    $(".card").append("    <div class=\"card-body\">\n" +
        "        <h5 class=\"card-title\">重要说明</h5>\n" +
        "        <h6 class=\"card-subtitle mb-2 text-muted\">important</h6>\n" +
        "        <p class=\"card-text\">此平台是一个自由共享试题资源的平台，所上传的试题内容版权风险由上传者承担，请上传者上传试题前确认版权正确，登录既代表同意此项规则。</p>\n" +
        "        <a href=\"http://wpa.qq.com/msgrd?v=3&uin=760303601&site=qq&menu=yes\" target=\"class\"><i class=\"iconfont icon-qq\">侵权联系</i></a>\n" +
        "    </div>")
    $(".control_area").empty()
    var str =
            "      <div class=\"form-group\">\n" +
            "        <label for=\"email\">邮箱</label>\n" +
            "        <input type=\"email\" class=\"form-control\" id=\"email\" >\n" +
            "      </div>\n" +
            "      <div class=\"form-group\">\n" +
            "        <label for=\"password\">密码</label>\n" +
            "        <input type=\"password\" class=\"form-control\" id=\"password\" >\n" +
            "      </div>\n"
    $(".control_area").append(str);
  }
  //绘制找回密码界面
  function drawForget() {
      $(".card").empty()
    flag = 1
    $(".control_area").empty()
      var str =

              "      <div class=\"form-group col-md-6\">\n" +
              "        <label for=\"email\">邮箱</label>\n" +
              "        <input type=\"email\" class=\"form-control\" id=\"email\" >\n" +
              "      </div>\n" +
              "      <div class=\"form-group col-md-6\">\n" +
              "        <label for=\"code\">验证码</label>\n" +
              "        <input type=\"text\" class=\"form-control\" id=\"code\" style=\"width: 40%\">\n" +
              "        <button type=\"button\" class=\"btn btn-dark sendcode\" style=\"margin-top: 10px\">发送验证码</button>\n" +
              "        <button type=\"button\" class=\"btn btn-success check\" style=\"margin-top: 10px\">确认找回</button>\n" +
              "      </div>\n"

    $(".control_area").append(str);
  }
  //忘记密码
  $(".forget").on("click",function () {
      code=0;
      drawForget()
  })
   //确认找回密码
    $(".control_area").on("click",".check",function () {
        var code_u = $(".control_area").children(".form-group").children("#code").val()

        if(code !== code_u){
            sendMessage("错误","验证码不正确","danger")
            return true;
        }
        changeEmail = $(".control_area").children(".form-group").children("#email").val()
        //核对后 绘制新密码页面
        changePassword()
    })
    //新密码页面
    function changePassword() {
        $(".control_area").empty()
        var str = "        <div class=\"form-group\">\n" +
            "            <label for=\"changePassword\">新密码</label>\n" +
            "            <input type=\"text\" class=\"form-control\" id=\"changePassword\">\n" +
            "           <button type=\"button\" class=\"btn btn-success change\" style=\"margin-top: 10px\">更改</button>\n" +
            "        </div>"
        $(".control_area").append(str)
    }
    //修改密码
    $(".control_area").on("click",".change",function () {
        var password = $(".control_area").children(".form-group").children("#changePassword").val()

        $.ajax({
            type:'post',
            url:'/ChangePassword',
            data:{
                'email':changeEmail,
                'password':password
            },
            traditional:true,
            async:false,
            dataType:'json',
            success:function (data) {
                sendMessage("成功","账号" + changeEmail + " 密码成功更改","success")
            },
            error:function (data) {
                sendMessage("失败","账号" + changeEmail + " 密码更改失败","danger")
            }
        })
    })

    //绘制注册页面
  function drawRegis() {
      $(".card").empty()
      flag = 1;
    $(".control_area").empty()
     var str =

              "      <div class=\"form-group\">\n" +
              "        <label for=\"email\">邮箱</label>\n" +
              "        <input type=\"email\" class=\"form-control\" id=\"email\">\n" +
              "      </div>\n" +
              "      <div class=\"form-group\">\n" +
              "        <label for=\"password\">密码</label>\n" +
              "        <input type=\"password\" class=\"form-control\" id=\"password\">\n" +
              "      </div>\n" +
              "    <div class=\"form-group\">\n" +
              "      <label for=\"name\">昵称</label>\n" +
              "      <input type=\"text\" class=\"form-control\" id=\"name\" >\n" +
              "    </div>\n" +
              "    <div class=\"form-group\">\n" +
              "      <label for=\"type\">学生\老师</label>\n" +
              "      <input type=\"text\" class=\"form-control\" id=\"type\" placeholder=\"Student?Teacher?\">\n" +
              "    </div>\n" +
              "    <div class=\"form-group\">\n" +
              "      <label for=\"Code\">验证码</label>\n" +
              "      <input type=\"text\" class=\"form-control\" id=\"Code\" style=\"width: 40%\">\n" +
              "      <button type=\"button\" class=\"btn btn-dark sendcode \" style=\"margin-top: 10px\">发送验证码</button>\n" +
              "    </div>\n" +
              "    <button type=\"button\" class=\"btn btn-success regis_submit\" style=\"margin-top: 10px\">确认注册</button>\n"+
              "    <button type=\"button\" class=\"btn btn-primary return\" style=\"margin-top: 10px\">返回登陆</button>\n"

    $(".control_area").append(str);
  }
//注册按钮
  $(".register").on("click",function () {
      code=0;
      drawRegis()
  })
    $(".control_area").on("click",".return",function () {
        code=0;
        drawLogin();
    })
    //提交注册
    var Registerflag = false;
  $(".control_area").on("click",".regis_submit",function () {
      var name = $(".control_area").children(".form-group").children("#name").val()
      var email = $(".control_area").children(".form-group").children("#email").val()
      var type = $(".control_area").children(".form-group").children("#type").val()
      var password = $(".control_area").children(".form-group").children("#password").val()

      registerCheck(email);


    var code_u = $(".control_area").children(".form-group").children("#Code").val()
    if(code !== code_u){
        sendMessage("错误","验证码不正确","danger")
        return true;
    }
      if(name.length === 0){
          sendMessage("错误","名字不能为空","danger")
          return false;
      }
      if(password === "" || password.length <= 7){
          sendMessage("错误","密码必须大于8位数","danger")
          return false;
      }
      if(Registerflag){
          sendMessage("错误","该邮箱已被注册，请找回密码","danger")
          return false;
      }

      $.ajax({
          type:'post',
          url:'/Registration',
          data:{
              'email':email,
              'name':name,
              'type':type,
              'password':password
          },
          traditional:true,
          async:false,
          dataType:'json',
          success:function (data) {
              sendMessage("成功","注册成功，跳转登录界面","success")
              flag = 0;
              drawLogin();

          },
          error:function (data) {
              sendMessage("错误","服务器异常","danger")
          }
      })
  })
    //重复注册检查
    function registerCheck(email) {
        $.ajax({
            type:'post',
            url:'/RegisterCheck',
            data:{
                'email':email,
            },
            traditional:true,
            async:false,
            dataType:'json',
            success:function (data) {
                if(data > 0){
                    Registerflag = true;
                }else{
                    Registerflag = false;
                }
            },
            error:function (data) {
                sendMessage("错误","服务器异常","danger")
            }
        })
    }
    var num = 60;
    var clock = '';
    var btn;
  //发送验证码
  $(".control_area").on("click",".sendcode",function () {

      btn = $(".control_area").children(".form-group").children(".sendcode");

      var email = $(".control_area").children(".form-group").children("#email").val()
      if(email.search("@") === -1){
          //错误信息
          sendMessage("错误","邮箱不存在","danger")
          return true;
      }


      $.ajax({
          type:'post',
          url:'/SendCode',
          data:{
              'email':email,
          },
          traditional:true,
          async:false,
          dataType:'json',
          success:function (data) {
                code = data;
                btn.addClass("disabled");
                btn.html(num+"秒后可获取")
                clock = setInterval(doLoop,1000);
          },
          error:function (data) {
              sendMessage("错误","发送失败，联系管理员","danger")
          }
      })
  })
    function doLoop() {
        num--;
        if(num > 0){
            btn.html(num+"秒后可获取")
        }else{
            btn.removeClass("disabled")
            btn.html("发送验证码")
            num = 60;
            clearInterval(clock);
        }
    }
    var m_clock = '';
    function sendMessage(tile,inner,state){

        $("#state").empty();
        var str = "<div style='margin-top: 50px' class=\"alert alert-"+state+" alert-dismissible rowmargin fade show\">" +
            "<button type=\"button\" class=\"close\" data-dismiss=\"alert\">&times;</button>" +
            "<strong>"+tile+"</strong> "+inner+"!" +
            "</div>";
        $("#state").append(str);
        m_clock = setInterval(closeMessage,5000);
    }

    function closeMessage() {
        $("#state").empty();
        clearInterval(m_clock)
    }
</script>

</body>
</html>